<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="../static/js/vue.js"></script>
</head>

<body>
<h3>示例：事件</h3>
<p>
    不同于组件和 prop，事件名不存在任何自动化的大小写转换。
</p>
<p>
    一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，
    但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。
    model 选项可以用来避免这样的冲突
</p>
<div id="app-1">
    <base-checkbox v-model="newlovingVue"></base-checkbox>

    <div>
        <input type="text" @change="specifiName($event)"/>输入框的change事件
        <input type="text" @input="specifiName($event)"/>输入框的输入事件
        <input type="text" @keyup.enter="specifiName($event)"/>输入框的回车事件
    </div>
</div>
<script>
    Vue.component('base-checkbox', {
        model: {
            prop: 'lovingVue',
            event: 'change'
        },
        props: ['lovingVue'],
        data: function () {
            //要重新定义一个data，赋值为props中的值，因为组件时单数据流，不能直接修改props
            return {
                newlovingVue: this.lovingVue
            }
        },
        watch: {//这里检测data中的值，一旦发生变化就提交事件到父组件
            newlovingVue: function (newVal, oldVal) {
                this.$emit('change', newVal)
            },
            //注：此处原文没有，如果不加上，复杂组件中父组件改变时，无法改变子组件，我就是被坑的不要不要的....
            lovingVue: function (val) {
                this.newlovingVue = val;
            },

        },
        template: `
          <input
              type="checkbox"
              v-on:change="$emit('change', $event.target.checked)"
          >`
    })

    var app = new Vue({
        el: '#app-1',
        methods: {
            specifiName(e) {
                var that = this;
                var val = e.target.value;
                console.log(val);
            }
        }
    })

</script>
</body>
</html>
